<template>
  <div id="div-1" class="py-1 bg-gray-100 mx-[10%]">
    <div class="bg-white p-4" id="sub3-content">
      <a-flex align="center" class="justify-between" id="sub3-top">
        <a-typography-title class="!m-0" :level="5" id="sub3-title">县市数据</a-typography-title>
        <a-radio-group :value="0" name="radioGroup" id="sub3-radios">
          <a-radio :value="index" :id="`sub3-radio-${index}`" v-for="(item, index) in sub3Radio" :key="index">{{item}}</a-radio>
        </a-radio-group>
      </a-flex>
      <a-flex class="gap-2 mt-4" id="sub3-top-gdps">
        <a-typography-link :id="`sub3-top-gdp-link-${index}`" class="relative flex-1 bg-blue-300 px-2 py-8 rounded-xl" v-for="(item, index) in sub3Gdp" :key="index">
          <a-typography-text :id="`sub3-top-gdp-top-${index}`" class="absolute right-0 top-0 bg-yellow-700 !text-white text-sm rounded-bl-md rounded-tr-md px-1">{{"TOP" + (index + 1)}}</a-typography-text>
          <a-typography-text :id="`sub3-top-gdp-city-${index}`" class="!text-yellow-500 font-bold text-xl">{{item.city}}</a-typography-text>
          <a-flex class="mt-1" :id="`sub3-top-gdp-num-${index}`">
            <a-typography-text :id="`sub3-top-gdp-num-tip-${index}`" class="text-xs text-white bg-orange-300 rounded-md px-1">GDP</a-typography-text>
            <a-typography-text :id="`sub3-top-gdp-num-text-${index}`" class="text-xs ml-1 text-white">{{item.gdp}}</a-typography-text>
          </a-flex>
          <a-flex align="center" class="mt-1" :id="`sub3-top-gdp-link-bottom-${index}`">
            <EyeOutlined  class="text-gray-400" :id="`sub3-top-gdp-link-icon-${index}`"/>
            <a-typography-text class="ml-1 relative text-blue-700" :id="`sub3-top-gdp-link-person-${index}`">
              {{item.num }}
              <a-typography-text class="absolute text-red-400 text-sm" :id="`sub3-top-gdp-link-w-${index}`">{{item.dw}}</a-typography-text>
            </a-typography-text>
          </a-flex>
        </a-typography-link>
      </a-flex>
    </div>
    <div class="bg-white p-4 mt-2" id="sub3-content2">
      <a-flex align="center" class="justify-between" id="sub3-top2">
        <a-typography-title class="!m-0" :level="5" id="sub3-title2">省会/副省级/直辖市下辖区</a-typography-title>
        <a-radio-group :value="0" name="radioGroup" id="sub3-radios2">
          <a-radio :value="index" :id="`sub3-radio2-${index}`" v-for="(item, index) in sub3Radio" :key="index">{{item}}</a-radio>
        </a-radio-group>
      </a-flex>
      <a-flex class="gap-2 mt-4" id="sub3-top-gdps2">
        <a-typography-link :id="`sub3-top-gdp2-link-${index}`" class="relative flex-1 bg-blue-300 px-2 py-8 rounded-xl" v-for="(item, index) in sub3Gdp2" :key="index">
          <a-typography-text :id="`sub3-top-gdp2-top-${index}`" class="absolute right-0 top-0 bg-yellow-700 !text-white text-sm rounded-bl-md rounded-tr-md px-1">{{"TOP" + (index + 1)}}</a-typography-text>
          <a-typography-text :id="`sub3-top-gdp2-city-${index}`" class="!text-yellow-500 font-bold text-xl">{{item.city}}</a-typography-text>
          <a-flex class="mt-1" :id="`sub3-top-gdp2-num-${index}`">
            <a-typography-text :id="`sub3-top-gdp2-num-tip-${index}`" class="text-xs text-white bg-orange-300 rounded-md px-1">GDP</a-typography-text>
            <a-typography-text :id="`sub3-top-gdp2-num-text-${index}`" class="text-xs ml-1 text-white">{{item.gdp}}</a-typography-text>
          </a-flex>
          <a-flex align="center" class="mt-1" :id="`sub3-top-gdp2-link-bottom-${index}`">
            <EyeOutlined  class="text-gray-400" :id="`sub3-top-gdp2-link-icon-${index}`"/>
            <a-typography-text class="ml-1 relative text-blue-700" :id="`sub3-top-gdp2-link-person-${index}`">
              {{item.num }}
              <a-typography-text class="absolute text-red-400 text-sm" :id="`sub3-top-gdp2-link-w-${index}`">{{item.dw}}</a-typography-text>
            </a-typography-text>
          </a-flex>
        </a-typography-link>
      </a-flex>
    </div>
    <div class="bg-white p-4 mt-2" id="sub3-content3">
      <a-flex align="center" class="justify-between" id="sub3-top3">
        <a-typography-title class="!m-0" :level="5" id="sub3-title3">特色数据</a-typography-title>
        <a-typography-text class="text-red-400">数据量突破100亿+</a-typography-text>
      </a-flex>
      <a-divider id="sub3-divider" class="my-1"></a-divider>
      <a-flex id="sub3-footer" class="gap-8" align="center" justify="center">
        <a-flex :vertical="true" class="flex-1 text-center relative" v-for="(item, index) in sub3data" :key="index" :id="`sub3-footer-box${index}`">
          <a-typography-text class="absolute z-10 bg-white rounded-lg text-sm px-1 right-[-20px] top-[40%]" :id="`sub3-footer-num${index}`">{{item.num}}</a-typography-text>
          <a-image :id="`sub3-footer-img${index}`" class="max-w-[60px]" :src="item.img" :preview="false"></a-image>
          <a-typography-link class="block mt-2 text-sm" :ellipsis="true" :id="`sub3-footer-title${index}`" >{{item.title}}</a-typography-link>
        </a-flex>
      </a-flex>
    </div>
  </div>
</template>

<script setup>
const sub3Gdp = [
  {city: '宜兴市', gdp: '2450亿', num: '2.38', dw: 'w'},
  {city: '如皋市', gdp: '1650亿', num: '1.30', dw: 'w'},
  {city: '沭阳县', gdp: '1500亿', num: '1.23', dw: 'w'},
  {city: '迂安市', gdp: '1310亿', num: '5.93', dw: 'k'},
  {city: '惠安县', gdp: '1270亿', num: '1.59', dw: 'w'},
  {city: '石狮市', gdp: '1260亿', num: '8.87', dw: 'k'},
  {city: '兴化市', gdp: '1215亿', num: '8.65', dw: 'k'},
  {city: '东台市', gdp: '1180亿', num: '8.34', dw: 'k'},
  {city: '府谷县', gdp: '1150亿', num: '1.39', dw: 'w'},
  {city: '邹城市', gdp: '1100亿', num: '4.13', dw: 'k'},
];

const sub3data = [
  {title: '专利数据', img: 'https://picsum.photos/id/1/60/60', num: '1000W+'},
  {title: '汽车数据', img: 'https://picsum.photos/id/2/60/60', num: '销售+上牌'},
  {title: '博士论文', img: 'https://picsum.photos/id/3/60/60', num: '90000+'},
  {title: '高新技术企业', img: 'https://picsum.photos/id/4/60/60', num: '50w+'},
  {title: '农业企业', img: 'https://picsum.photos/id/5/60/60', num: '190w+'},
  {title: '酒店旅馆', img: 'https://picsum.photos/id/6/60/60', num: '18w+'},
  {title: '药店数据', img: 'https://picsum.photos/id/7/60/60', num: '6w+'},
  {title: '银行数据', img: 'https://picsum.photos/id/8/60/60', num: '23w+'},
  {title: '协会数据', img: 'https://picsum.photos/id/9/60/60', num: '2w+'},
  {title: '瞪羚/独角兽', img: 'https://picsum.photos/id/10/60/60', num: '3.3w+'},
  {title: '会计事务所', img: 'https://picsum.photos/id/11/60/60', num: '1.2w+'},
  {title: '图书馆数据', img: 'https://picsum.photos/id/12/60/60', num: '0.2w+'},
]

const sub3Gdp2 = [
  {city: '浦东新区', gdp: '17300亿', num: '1.36', dw: 'w'},
  {city: '闵行区', gdp: '3200亿', num: '2.93', dw: 'k'},
  {city: '江宁区', gdp: '3150亿', num: '1.12', dw: 'w'},
  {city: '丰台区', gdp: '2300亿', num: '3.27', dw: 'k'},
  {city: '汉南区', gdp: '2200亿', num: '4.42', dw: 'k'},
  {city: '武昌区', gdp: '2000亿', num: '2.33', dw: 'k'},
  {city: '东西湖区', gdp: '1900亿', num: '3.51', dw: 'k'},
  {city: '江汉区', gdp: '1740亿', num: '3.36', dw: 'k'},
  {city: '江岸区', gdp: '1700亿', num: '2.69', dw: 'k'},
  {city: '涪陵区', gdp: '1700亿', num: '3.58', dw: 'k'},
];

const sub3Radio =  [
'GDP',
'GDP增长率',
'第一产业',
'第二产业',
'第三产业',
'户籍人口',
'人均GDP',
'财政收入',
'热度排名'
]

</script>
<style></style>
